<!DOCTYPE html>
<html>
<head>
    <title>API</title>

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>
    
        <div id="example" class="k-content">

            <div class="configuration k-widget k-header">
                <span class="configHead">API Functions</span>
                <ul class="options">
                    <li>
                        <button class="k-button" id="disableNode">Disable node</button>
                    </li>
                    <li>
                        <button class="k-button" id="enableAllNodes">Enable all nodes</button>
                    </li>
                    <li>
                        <button class="k-button" id="removeNode">Remove node</button>
                    </li>
                    <li>
                        <button class="k-button" id="expandAllNodes">Expand all nodes</button>
                    </li>
                    <li>
                        <button class="k-button" id="collapseAllNodes">Collapse all nodes</button>
                    </li>
                    <li>
                        <input id="appendNodeText" value="Node" class="k-textbox"/>
                        <button class="k-button" id="appendNodeToSelected">Append node</button>
                    </li>
                </ul>
                <span class="configHead" style="margin-top: 1.5em">DataSource interaction</span>
                <ul class="options">
                    <li>
                        <button class="k-button" id="sortDataSource">Sort</button>
                    </li>
                    <li>
                        <input id="filterText" value="Item 1" class="k-textbox"/>
                        <button class="k-button" id="filterDataSource">Filter by text</button>
                    </li>
                </ul>
            </div>

            <div id="treeview"></div>

            <script>
                $(document).ready(function() {
                    var treeview = $("#treeview").kendoTreeView({
                            dataSource: [
                                { text: "Item 1", expanded: true, items: [
                                    { text: "Item 1.1" },
                                    { text: "Item 1.2" },
                                    { text: "Item 1.3" }
                                ] },
                                { text: "Item 2", items: [
                                    { text: "Item 2.1" },
                                    { text: "Item 2.2" },
                                    { text: "Item 2.3" }
                                ] },
                                { text: "Item 3" }
                            ]
                        }).data("kendoTreeView"),

                        handleTextBox = function(callback) {
                            return function(e) {
                                if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                                    callback(e);
                                }
                            };
                        };


                    $("#disableNode").click(function() {
                        var selectedNode = treeview.select();

                        treeview.enable(selectedNode, false);
                    });

                    $("#enableAllNodes").click(function() {
                        var selectedNode = treeview.select();

                        treeview.enable(".k-item");
                    });

                    $("#removeNode").click(function() {
                        var selectedNode = treeview.select();

                        treeview.remove(selectedNode);
                    });

                    $("#expandAllNodes").click(function() {
                        treeview.expand(".k-item");
                    });

                    $("#collapseAllNodes").click(function() {
                        treeview.collapse(".k-item");
                    });

                    var append = handleTextBox(function(e) {
                            var selectedNode = treeview.select();

                            // passing a falsy value as the second append() parameter
                            // will append the new node to the root group
                            if (selectedNode.length == 0) {
                                selectedNode = null;
                            }

                            treeview.append({
                                text: $("#appendNodeText").val()
                            }, selectedNode);
                        });

                    $("#appendNodeToSelected").click(append);
                    $("#appendNodeText").keypress(append);

                    // datasource actions

                    var ascending = false;

                    $("#sortDataSource")
                        .text(ascending ? "Sort ascending" : "Sort descending")
                        .click(function() {
                            treeview.dataSource.sort({
                                field: "text",
                                dir: ascending ? "asc" : "desc"
                            });

                            ascending = !ascending;

                            $(this).text(ascending ? "Sort ascending" : "Sort descending")
                        });

                    var filter = handleTextBox(function(e) {
                        var filterText = $("#filterText").val();

                        if (filterText !== "") {
                            treeview.dataSource.filter({
                                field: "text",
                                operator: "contains",
                                value: filterText
                            });
                        } else {
                            treeview.dataSource.filter({});
                        }
                    });

                    $("#filterDataSource").click(filter);
                    $("#filterText").keypress(filter);
                });
            </script>
            <style scoped>
                .configuration .k-textbox {
                    width: 50px;
                }
            </style>
        </div>

</body>
</html>
